import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LocalizationService } from '@abp/ng.core';
import { ResetInterval, resetIntervalOptions } from './reset-interval.enum';

@Component({
  selector: 'serial-number-segment',
  template: `
    <form nz-form nzLayout="horizontal" [formGroup]="validateForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.Length') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-input-number 
            formControlName="Length"
            [nzMin]="1"
            [nzMax]="20"
          ></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.Start') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-input-number 
            formControlName="Start"
            [nzMin]="0"
          ></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.Stride') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-input-number 
            formControlName="Stride"
            [nzMin]="1"
          ></nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.Padding') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <input 
            nz-input 
            formControlName="Padding"
            placeholder="{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.Padding.PlaceHolder') }}"
          >
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="6">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.ResetInterval') }}</nz-form-label>
        <nz-form-control [nzSpan]="18">
          <nz-select formControlName="ResetInterval">
            <nz-option 
              *ngFor="let option of resetIntervalOptions" 
              [nzValue]="option.value" 
              [nzLabel]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Dialog.DynamicSegment.SerialNumberSegment.ResetInterval.Options.' + option.key)"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </form>
  `,
  styles: []
})
export class SerialNumberSegmentComponent implements OnInit, OnChanges {
  resetIntervalOptions = resetIntervalOptions;

  readonly defaultFormData = {
    Length: 4,
    Start: 1,
    Stride: 1,
    Padding: '0',
    ResetInterval: ResetInterval.None
  };

  @Input() formData: any;
  @Output() configurationChanged = new EventEmitter<any>();
  @Output() validityChanged = new EventEmitter<boolean>();

  validateForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private localizationService: LocalizationService
  ) {}

  ngOnInit() {
    this.buildForm();
    if (!this.formData) {
      this.formData = { ...this.defaultFormData };
    }
    this.validateForm.patchValue(this.formData);
    this.onFormChange();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes['formData'] && !this.formData) {
      this.formData = { ...this.defaultFormData };
    }
    if (this.validateForm) {
      this.validateForm.patchValue(this.formData);
    }
  }

  private buildForm() {
    this.validateForm = this.fb.group({
      Length: [4, [Validators.required]],
      Start: [1, [Validators.required]],
      Stride: [1, [Validators.required]],
      Padding: ['0', [Validators.required]],
      ResetInterval: [ResetInterval.None, [Validators.required]]
    });

    this.validateForm.valueChanges.subscribe(() => {
      this.onFormChange();
    });
  }

  private onFormChange() {
    if (this.validateForm.valid) {
      this.formData = this.validateForm.value;
      this.configurationChanged.emit(this.formData);
    }
    this.validityChanged.emit(this.validateForm.valid);
  }

  protected l(key: string): string {
    return this.localizationService.instant(key);
  }
}



